<template>
    <div class="app-container"
         v-loading.fullscreen.lock="allLoading"
         element-loading-text="拼命处理中,请耐心等待"
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-button type="info" @click="showRemoteCode">{{buttonLabel}}</el-button>
        <el-dialog :close-on-click-modal="true" :title="mainDialogInfo.title" :visible.sync="showDialog"
                   width="100%" append-to-body @close="closeDialog">

<!--            跨域无法访问-->
<!--            <iframe v-if="!sksUtils.strIsEmpty(codeRawUrl)" :src="codeRawUrl" frameborder="0" width="100%" height="600px"></iframe>-->
            <el-link :underline="false" icon="el-icon-document-copy" @click="handleClipboard(codeValue,$event)" v-clipboard:copy="codeValue" v-clipboard:success="()=>sksUtils.msgSuccess(`复制成功`)" style="float:right">复制</el-link>
            <pre><code class="hljs" v-html="highlightedCode(this.codeValue)"></code></pre>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelMainDialog">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>/**
 * 显示url获取的源代码
 */
import {sksDialogFormMixin} from "/lib/dialog-form";
import axios from "axios";

import hljs from "highlight.js/lib/highlight";
import "highlight.js/styles/github-gist.css";
hljs.registerLanguage("java", require("highlight.js/lib/languages/java"));
hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("html", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml"));
hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript"));
hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql"));

export default {
    name: "ShowRemoteCodeDialog",
    mixins: [
        sksDialogFormMixin,
    ],
    props:{
        //代码远程链接,例如 gitee 的raw
        codeRawUrl: [String],

        buttonLabel:{
            type: String,
            default: '查看代码'
        }
    },
    data(){
        return {
            codeValue: '',
            codeLoading: true,
        }
    },
    methods:{
        showRemoteCode(){
            if (this.sksUtils.strIsEmpty(this.codeRawUrl)) {
                this.sksUtils.msgError(`codeRawUrl 不能为空`)
                return
            }
            if(this.codeRawUrl.startsWith("http")){
                window.open(this.codeRawUrl, "_blank");
                return
            }
            this.show({
                dialogInfo:{
                    title: '查看代码'
                }
            })
        },
        showAfter(){
            if (this.sksUtils.strIsEmpty(this.codeRawUrl)) {
                this.sksUtils.msgError(`codeRawUrl 不能为空`)
                return
            }
            this.codeValue=''
            this.codeLoading=true
            //通过给定的ID来发送请求
            axios.get(this.codeRawUrl,{
            }).then((res)=>{
                console.log("res",res)
                this.codeValue=res.data
                this.codeLoading=false
            }).catch((err)=>{
                this.codeLoading=false
            });
        },
        /** 高亮显示 */
        highlightedCode(code) {
            let key=this.codeRawUrl
            const vmName = key.substring(key.lastIndexOf("/") + 1);
            let language = vmName.substring(vmName.indexOf(".") + 1, vmName.length);
            const result = hljs.highlight(language, code || "", true);
            return result.value || '&nbsp;';
        },


    },

}
</script>

<style scoped>

</style>
<!--

            推荐
            <ShowRemoteCodeDialog codeRawUrl="https://gitee.com/shoukaiseki/sks-plugin-el-erp/blob/master/docs/.vuepress/example/dialog/Dialog40.vue" button-label="查看对话框Dialog40代码"/>

            <ShowRemoteCodeDialog codeRawUrl="/sks-plugin-el-erp/lib/core.js" button-label="core代码"/>-->

            nginx目录不支持 .vuepress 目录的访问
<!--        <ShowRemoteCodeDialog codeRawUrl="/sks-plugin-el-erp/docs/.vuepress/example/dialog/Dialog40.vue" button-label="对话框Dialog40代码"/>
-->
